<template>
  <div>
    <el-card>
      <el-row class="header">用户管理</el-row>
      <el-row :gutter="20" class="search">
        <el-button type="primary" class="btnLeft" @click="newCreate"
          >新建</el-button
        >
        <el-col :span="7">
          <el-input class="searchLeft" v-model="search"></el-input>
        </el-col>
        <el-button type="primary" class="btnLeft" @click="searchTableList"
          >搜索</el-button
        >
        <el-button
          type="info"
          class="btnRight"
          @click="withdraw"
          v-if="!searchState"
          >撤回</el-button
        >
        <el-button
          type="success"
          class="btnRight"
          @click="goBack"
          v-if="searchState"
          >返回</el-button
        >
      </el-row>

      <HomeIndex :List="List" v-if="!searchState"></HomeIndex>
      <HomeSearchList
        :watchData="watchData"
        v-if="searchState"
      ></HomeSearchList>

      <!-- <el-dialog
        title="新建/编辑用户"
        :visible.sync="dialogFormVisible"
        @close="closeDialog"
      >
        <el-form :model="form" :gutter="20" ref="formdata" >
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select
              v-model="form.sex"
              placeholder="请选择性别"
              class="btnLeft"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item
            label="详细地址"
            :label-width="formLabelWidth"
            class="cascaderItem"
          >
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              class="btnLeft cascader"
            ></el-cascader>
            <el-input
              v-model="form.address"
              autocomplete="off"
              class="btnLeft inputWidth"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="determine(form)">确 定</el-button>
        </div>
      </el-dialog> -->

      <Dialog :tableData="tableData"></Dialog>
    </el-card>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import HomeIndex from "../components/home/Home-Index.vue";
import HomeSearchList from "../components/home/Home-SearchList.vue";
// import DialogVue from "../components/home/dialog.vue";
import Dialog from "../components/Dialog.vue";
export default {
  name: "Home",
  components: {
    HomeIndex,
    HomeSearchList,
    Dialog,
  },
  data() {
    return {
      search: "",
      tableData: [],
      watchData: [],
      searchState: false,
      //  rulesStatus = false,
      formLabelWidth: "120px",
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "番禺区",
                  label: "番禺区",
                },

                {
                  value: "越秀区",
                  label: "越秀区",
                },
                {
                  value: "花都区",
                  label: "花都区",
                },
                {
                  value: "海珠区",
                  label: "海珠区",
                },
                {
                  value: "从化区",
                  label: "从化区",
                },
                {
                  value: "增城区",
                  label: "增城区",
                },
                {
                  value: "南沙区",
                  label: "南沙区",
                },
                {
                  value: "黄埔区",
                  label: "黄埔区",
                },
                {
                  value: "白云区",
                  label: "白云区",
                },
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "荔湾区",
                  label: "荔湾区",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    //判断本地内存是否有tableData值
    if (localStorage.getItem("tableData")) {
      console.log(1);
      let stateFirst = localStorage.getItem("tableData");
      let selectState = JSON.parse(stateFirst);
      // console.log(selectState);
      this.tableData = selectState;
      this.listAll(selectState);
      // this.listId = this.List.length;
    } else {
      this.setTable();
      this.listAll(this.tableData);
      console.log(this.tableData);
      // this.listId = this.List.length;
    }
  },
  props: {
    msg: String,
  },
  computed: {
    ...mapState({
      List: (state) => state.watchList.List,
      watchList: (state) => state.watchList.watchList,
      dialogFormVisible: (state) => state.dialog.dialogFormVisible,
      index: (state) => state.dialog.index,
      withdrawList: (state) => state.dialog.withdrawList,
      // form: (state) => state.dialog.form,
      // value: (state) => state.dialog.value,
      // dialogTitle: (state) => state.dialog.dialogTitle,
    }),
  },
  methods: {
    ...mapMutations([
      "searchWatchlist",
      "handleDelete",
      "openDialogstate",
      "closeDialogstate",
      "titleChange",
      "editIndex",
      "listAll",
      "changewithdraw",
      // "initialize",
      // "Adetermine",
    ]),

    //创建基础tableData
    setTable() {
      let resdata = [
        {
          id: 0,
          tel: "18888800888",
          name: "王0虎",
          sex: "男",
          address: " 1518 弄",
          value: ["广东省", "广州市", "黄埔区"],
        },
        {
          id: 1,
          tel: "18888800888",
          name: "王1虎",
          sex: "男",
          address: " 1518 弄",
          value: ["广东省", "广州市", "天河区"],
        },
        {
          id: 2,
          tel: "18888800888",
          name: "王3虎",
          sex: "男",
          address: " 1518 弄",
          value: ["广东省", "广州市", "天河区"],
        },
        {
          id: 3,
          tel: "18888800888",
          name: "王4虎",
          sex: "男",
          address: " 1518 弄",
          value: ["广东省", "广州市", "天河区"],
        },
      ];
      this.tableData = resdata;
    },
    //搜索
    searchTableList() {
      // console.log(this.search);

      this.searchWatchlist(this.search);
      // console.log(this.watchList);
      this.watchData = this.watchList;
      this.searchState = true;
    },

    goBack() {
      this.searchState = false;
    },

    //新建按钮
    newCreate() {
      this.openDialogstate();
    },
    //撤回
    withdraw() {
      this.changewithdraw();
      // this.changewithdraw();
      // this.$nextTick(() => {
      //   this.tableData = this.List;
      // });
    },
    // //弹窗取消按钮
    // cancel() {
    //   this.closeDialogstate();
    //   this.initialize();
    // },
    // //弹窗关闭按钮
    // closeDialog() {
    //   this.closeDialogstate();
    //   this.initialize();
    // },

    // handleChange(v) {
    //   console.log(v);
    // },

    // //改变弹窗标题
    // titleChange() {
    //   if (this.form.name == "") {
    //     this.dialogTitle = "添加用户";
    //   } else {
    //     this.dialogTitle = "编辑用户";
    //   }
    // },

    //弹窗内容中添加或者编辑的确定按钮
    // determine(formName) {
    //   this.Adetermine();
    //   // console.log(formName);
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });

    //   if (this.index == null) {
    //     this.form.id = this.tableData.length;
    //     this.tableData.push(this.form);
    //   } else {
    //     this.tableData[this.index] = this.form;
    //     this.editIndex(null);
    //   }
    //   this.listAll(this.tableData);
    //   this.closeDialogstate();
    //   // this.refs.formdata.resetFields();
    //   //初始化弹窗表单信息
    //   this.initialize();
    // },
  },
};
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 50px;
}
.search {
  margin-bottom: 10px;
}
.btnLeft {
  float: left;
}
.searchLeft {
  float: left;
}
.btnRight {
  float: right;
}
.footer {
  margin-top: 10px;
}
.inputWidth {
  width: 370px;
}
.cascader {
  margin-right: 10px;
}
</style>
